<template>
  <div
    class="realTimeMonitoring"
    @click="MenuRef.hiddenMenu($event)"
    @contextmenu.prevent="MenuRef.contextmenu($event)"
  >
    <header>
      <div class="time">{{ currentDate }} {{ currenttime }} {{ week }}</div>
      <div class="name">{{ title }}</div>
      <a-dropdown
        v-if="path === '/realTimeMonitoring/monitorageroom'"
        class="dropdown"
        :getPopupContainer="
          (triggerNode) => {
            return triggerNode.parentNode || document.body;
          }
        "
      >
        <a class="ant-dropdown-link" @click.prevent>
          {{ selectName }}
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu style="z-index: 999; background-color: #031f33">
            <a-menu-item v-for="(i, ind) in sec" :key="ind">
              <a href="javascript:;" class="select" @click="choose(i)">{{
                i.WRName
              }}</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </header>
    <main><router-view :fullscreen="fullscreen" :WRNo="WRNo" /></main>
    <Menu ref="MenuRef" />
  </div>
</template>

<script setup name="realTimeMonitoring">
/* import { dv-full-screen-container } from '@kjgl77/datav-vue3' */
import { ref, reactive, watch, onMounted, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import { realTimeStore } from "@/store";
import Menu from "@/realTimeMonitoring/components/menu.vue";
import monitorageRoomApi from "@/api/monitorageRoomApi.js";

let realTime = realTimeStore();
realTime.getTime();
//获取时间
const currentDate = computed(() => realTime.currentDate);
const week = computed(() => realTime.week);
const currenttime = computed(() => realTime.currenttime);
const route = useRoute();
let title = ref("");
let path = ref("");
watch(
  () => [route.path, route.meta.name],
  (to) => {
    title.value = to[1];
    path.value = to[0];
  },
  {
    immediate: true,
  }
);
onBeforeUnmount(() => {
  realTime.clearId();
});
const MenuRef = ref();
const fullscreen = () => {
  if (!document.fullscreenElement) {
    const el = document.documentElement;
    el.requestFullscreen ||
    el.mozRequestFullScreen ||
    el.webkitRequestFullscreen ||
    el.msRequestFullScreen
      ? el.requestFullscreen() ||
        el.mozRequestFullScreen() ||
        el.webkitRequestFullscreen() ||
        el.msRequestFullscreen()
      : null;
  }
};

const sec = ref([]);
let selectName = ref("");
let WRNo = ref();
const choose = (data) => {
  selectName.value = data.WRName;
  WRNo.value = data.WRNo;
};
/* ------------ */
/* 请求所有老化室 */
const fetchAllWorkAreaInfosForMonitor = () => {
  monitorageRoomApi
    .getAllWorkAreaInfosForMonitor({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
    })
    .then((res) => {
      sec.value = res.Data;
      selectName.value = res.Data[0].WRName;
      WRNo.value = res.Data[0].WRNo;
    });
};

onMounted(() => {
  // 获取全部老化室信息(大屏)
  fetchAllWorkAreaInfosForMonitor();
});
</script>

<style lang="scss" scoped>
.realTimeMonitoring {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #131d34;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  & > * {
    width: 100%;
    background-repeat: no-repeat;
  }

  & > header {
    height: 68px;
    background-image: url("@/static/supervisoryControl/pic_bj_bj02.png");
    background-size: 100% 100%;
    container-type: size !important;
    position: relative;
    & > .time {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: calc((2.6cqh) + (1.3cqw));
      color: #79eefc;
      /*  height: 68px; */
      position: absolute;
      left: 0.5%;
      top: 46%;
    }
    & > .name {
      height: 68px;
      line-height: 68px;
      text-align: center;
      font-family: PingFangSC, PingFang SC;

      font-size: calc((4cqh) + (2cqw));
      color: #7aeefb;
    }
    .dropdown {
      position: absolute;
      right: 1.5%;
      top: 49%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: calc((2cqh) + (1cqw));
      color: #ff8300;
    }
    .select {
      font-size: calc((2cqh) + (1cqw));
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #00e5ff;
      &:hover {
        color: #ff8300;
      }
    }
  }

  & > main {
    flex: 1;
   
    overflow: hidden;
  }
}
</style>